<template>
  <div class="page-main text-left">
<!--    头部栏-->
    <div class="pt20 ml20">
      <el-button type="primary" @click="newPage">新建页面</el-button>
    </div>
<!--    工具栏-->
    <div class="toolbar pt20 ml20 font16">
      <el-button type="text" :size="'medium'">全部</el-button>
      <el-button type="text" :size="'medium'" >最近使用</el-button>
      <el-button type="text" :size="'medium'" >最近更新</el-button>
      <el-button type="text" :size="'medium'" >我参与设计</el-button>
      <div class="fr mr20">
        <el-input
          v-model="search"
          maxlength="32"
          clearable
          class="input_line wd280 font16"
          size="mini"
          placeholder="输入关键字搜索"/>
        <i class="el-icon-search inlineBlock cp"></i>
      </div>
    </div>
    <div class="ml20 pt20">

      <dl class="page-demo phonedemo">
        <dt class="phone"><img :src="phoneImage" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导查看视图</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo phonedemo">
        <dt class="phone"><img :src="phoneImage" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导查看视图</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo phonedemo">
        <dt class="phone"><img :src="phoneImage" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导查看视图</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo phonedemo">
        <dt class="phone"><img :src="phoneImage" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导查看视图</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="bigScreen" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图大屏领导视图大屏领</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

      <dl class="page-demo">
        <dt><img :src="pcImage" width="100%" height="100%"/></dt>
        <dd class="detail">
          <div class="font16"> 领导视图桌面</div>
          <div class="font12 lightcolor">最后更新时间：2020年3月28日20:00:15 谭农春</div>
        </dd>
      </dl>

    </div>
  </div>
</template>

<script>
import phoneImage from '../../assets/images/user/banner/mobile.gif'
import bigScreen from '../../assets/images/user/banner/daping.gif'
import pcImage from '../../assets/images/user/banner/pc.png'

export default {
  name: 'PageMain',
  data () {
    return {
      search: '',
      phoneImage: phoneImage,
      bigScreen: bigScreen,
      pcImage: pcImage,
      count: 1,
      pages: []
    }
  },
  methods: {
    newPage () {
      this.$router.push({name: 'NewPage'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page-main {
  height: 100%;
  width: 100%;
}
.page-main .phonedemo{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.page-main .page-demo {
    cursor: pointer;
    background-color: transparent;
    width: 400px;
    height: 280px;
    margin-bottom: 20px;
    display: inline-block;
    margin-right: 20px;
    box-shadow: 0 2px 10px 0 #e0e5f0;
 }

.page-main .page-demo .phone img{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
  .page-demo .detail{
    height: 60px;
    border: 1px solid #cccccc;
  }
</style>
